<template>
  <div class="common_screen">
    <!-- 布局容器 -->
    <el-container :style="containerStyle">
      <!-- 主要区域容器 -->
      <el-main :style="mainStyle">

        <div class="loginBox">
          <h1>欢迎登陆</h1>
          <el-form :model="loginForm" label-width="100px">
            <el-form-item label="用户账号">
              <el-input type="text" v-model="loginForm.sysAccount" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户密码">
              <el-input type="password" v-model="loginForm.sysPassword" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
              <el-input v-model="loginForm.captchaCode"></el-input>
            </el-form-item>
            <el-form-item>
              <img v-bind:src="imgUrl" @click="getCaptchaCodeImg"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="loginBtn" @click="login">登录</el-button>
              <el-button type="info" class="resetBtn" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>

    </el-container>
  </div>
</template>


<script>

  //引入自定义校验js
  import {RSAKey} from '@/assets/js/common/rsa.js'
  import axios from 'axios'
  import qs from "qs";
  import common from "@/assets/js/common/common.js"

  export default {
    data() {
      return {
        //布局容器css样式配置
        containerStyle: {
          height: "100%",
          width: "100%"
        },
        //主容器的css样式
        mainStyle: {
          backgroundImage: "url(" + require("../../assets/images/loginBackground.jpg") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
        },
        //登陆表单
        loginForm: {
          sysAccount: null,
          sysPassword: null,
          captchaCode: null
        },
        //验证码图片
        imgUrl: null
      }
    },
    //初始化加载
    mounted: function () {
      this.getCaptchaCodeImg();// 获取验证码图片
    },
    //具体js方法
    methods: {
      /**
       * 获取验证码图片
       * */
      getCaptchaCodeImg() {
        const _this = this;
        _this.imgUrl = '';
        clearTimeout();
        setTimeout(function () {
          _this.imgUrl = '/api/login/defaultKaptcha';
        }, 100);
      },
      /**
       * rsa加密
       * */
      RSAEncrypt() {

      },
      /**
       * login登陆
       * */
      login() {
        let _this = this;
        this.getRSAKey().then((res) => {
          //新建rsa对象
          _this.rsa = new RSAKey();
          if (null == res.data.modulus || '' == res.data.modulus) {
            console.log("publicKey is null. " + res.data.modulus);
            return;
          }
          if (null == res.data.publicExponent || '' == res.data.publicExponent) {
            console.log("exponent is null.");
            return;
          }
          _this.rsa.setPublic(res.data.modulus, res.data.publicExponent);

          //登录所传的参数，经过rsa加密
          _this.beforeLog = qs.stringify({
            userName: _this.rsa.encrypt(_this.loginForm.sysAccount),
            password: _this.rsa.encrypt(_this.loginForm.sysPassword),
            captchaCode: _this.loginForm.captchaCode
          });

          //加密后登陆
          _this.afterCrypt(_this.beforeLog);
        });

      },
      /**
       * 重置登陆表单
       * */
      resetForm() {
        this.loginForm = {};
      },
      //获取RSAKey
      getRSAKey() {
        return axios.get("/api/login/getRSAKey", {});
      },
      //加密后登陆
      afterCrypt(param) {
        let _this = this;
        _this.$http.post("/api/login/login", param).then(function (res) {
          if (res.code === 200) {
            _this.$router.push({name: 'main'});
          } else {
            common.generalMessage(res);
          }
        });
      }
    }
  }
</script>


<style scoped>

  .loginBox {
    float: right; /*float： 把图像向右浮动：*/
    margin: 10% 100px 0 0; /*margin：外边距 上 右 下 左 */
    background-color: rgba(255, 255, 255, 0.8); /*background-color 背景颜色*/
    padding: 35px 50px 0 0; /*padding：内边距 上 右 下 左 */
    border-radius: 5px; /*border-radius 向div添加圆角边框：*/
  }

  .loginBox h1 {
    margin: 0 0 30px 15%;
  }

  .loginBtn {
    margin: 0 auto;
    width: 110px;
  }

  .resetBtn {
    margin: 0 auto;
    width: 110px;
  }

</style>
